<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 按钮的事件，使用v-on监听事件，并对用户的输入进行响应 -->
    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage"> 反转字符串 </button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Runoob!'
            },
            methods: {
                reverseMessage: function() {
                    this.message = this.message.split('').reverse().join()
                }
            }
        })
    </script>
</body>

<body>
    <!-- 在input输入框中，我们可以使用v-model指令实现双向数据绑定 -->
    <!-- v-model指令用来在inout,select,textarea,checkbox,radio等表单控件元素上创建双向数据绑定 -->
    <!-- 根据表单上的值，自动更新绑定的元素的值 -->
    <div id="app2">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <script>
        new Vue({
            el: "#app2",
            data: {
                message: 'Runoob!'
            }
        })
    </script>
</body>

<body>
    <!-- vue.js 允许自定义过滤器，被用作一些常见的文本格式化 -->
    <!-- 过滤器由 ‘管道符’指示 -->
    <div id="app3">
        <!-- 在两个大括号中 -->
        '案例三：首字母大写'： {{message | capitalize}}

        <!-- 在 v-bind指令中 -->
        <!-- <div v-bind:id="rawId | formatId"></div> -->
    </div>
    <script>
        new Vue({
                el: "#app3",
                data: {
                    message: 'runoob'
                },
                filters: {
                    // 过滤器函数接受表达式的值作为第一个参数
                    capitalize: function(value) {
                        if (!value) return;
                        value = value.toString()
                        return value.charAt(0).toUpperCase() + value.slice(1)
                    }
                }
            })
            // 过滤器可以串联
            // {{message | filterA | filterB}}

        // 过滤器是javascript函数，因此可以接受参数
        // {{message | filter('arg1',arg2)}}
        // 这里message是第一个参数，
        // 字符串arg1将传给过滤器作为第二个参数
        // arg2表达式的值将被求值然后传给过滤器作为第三个参数
    </script>

    <!-- v-bind缩写 -->
    <!-- 完整写法 -->
    <a v-bind:href="url"></a>
    <!-- 缩写 -->
    <a :href="url"></a>

    <!-- v-on缩写 -->
    <!-- 完整写法 -->
    <a v-on:click="doSomething"></a>
    <!-- 缩写 -->
    <a @click="doSomething"></a>
</body>

</html>